import React, { useState, useEffect } from 'react';
import {
    Card, Input, Typography, Row, Col, Statistic,
    Tabs, Divider, Space, Layout, theme
} from 'antd';
import {
    FontSizeOutlined,
    EditOutlined,
    BarChartOutlined,
    EyeOutlined
} from '@ant-design/icons';

// 解构组件
const { TextArea } = Input;
const { Title, Paragraph, Text } = Typography;
const { Content } = Layout;

// 字体样式配置 - 包含多种英文风格字体
const fontStyles = {
    print: {
        fontFamily: '"Merriweather", serif',
        name: 'Print Font',
        fontWeight: 400,
        lineHeight: 1.6,
        description: 'Classic serif font for formal documents'
    },
    italic: {
        fontFamily: '"Playfair Display", serif',
        fontStyle: 'italic',
        name: 'Italic Font',
        fontWeight: 500,
        lineHeight: 1.6,
        description: 'Elegant italic style for emphasis'
    },
    sans: {
        fontFamily: '"Roboto", sans-serif',
        name: 'Sans-serif Font',
        fontWeight: 400,
        lineHeight: 1.6,
        description: 'Modern clean font for digital content'
    },
    cursive: {
        fontFamily: '"Dancing Script", cursive',
        fontSize: '1.8rem',
        name: 'Cursive Font',
        fontWeight: 600,
        lineHeight: 1.5,
        description: 'Handwriting style for creative works'
    },
    mono: {
        fontFamily: '"Courier Prime", monospace',
        name: 'Monospace Font',
        fontWeight: 400,
        lineHeight: 1.6,
        description: 'Fixed-width font for code or tabular data'
    }
};

// 生成标签页配置项
const generateTabsItems = (inputText, token) => {
    return Object.entries(fontStyles).map(([key, style]) => ({
        key,
        label: (
            <Space size="small" style={{ alignItems: 'center' }}>
                <FontSizeOutlined size={14} style={{ color: token.colorPrimary }} />
                <span>{style.name}</span>
            </Space>
        ),
        children: (
            <>
                {/* 字体预览区域 */}
                <div
                    style={{
                        ...style,
                        padding: '32px',
                        minHeight: '220px',
                        border: `1px solid ${token.colorBorderAlt}`,
                        borderRadius: token.borderRadiusLG,
                        marginTop: '12px',
                        backgroundColor: token.colorBgContainer,
                        boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
                        transition: 'box-shadow 0.3s ease'
                    }}
                    className="hover:shadow-md"
                >
                    {inputText.trim()
                        ? (
                            <Text style={{ color: token.colorTextBase }}>
                                {inputText.split('\n').map((line, idx) => (
                                    <p key={idx} style={{ margin: '8px 0' }}>{line || <br />}</p>
                                ))}
                            </Text>
                        )
                        : (
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                height: '100%',
                                color: token.colorTextSecondary
                            }}>
                                <Space size="small">
                                    <EyeOutlined />
                                    <Text>Type something to preview this font...</Text>
                                </Space>
                            </div>
                        )
                    }
                </div>

                {/* 字体描述 */}
                <Text type="secondary" style={{
                    fontSize: '0.85rem',
                    marginTop: '8px',
                    display: 'inline-block'
                }}>
                    {style.description}
                </Text>
            </>
        )
    }));
};

const EnglishFontStudio = () => {
    // 状态管理
    const [inputText, setInputText] = useState('');
    const [wordStats, setWordStats] = useState({ total: 0, unique: 0 });
    const { token } = theme.useToken(); // 接入Ant Design主题系统

    // 处理文本输入变化
    const handleTextChange = (e) => {
        setInputText(e.target.value);
    };

    // 单词统计逻辑
    useEffect(() => {
        if (!inputText.trim()) {
            setWordStats({ total: 0, unique: 0 });
            return;
        }

        // 优化文本处理逻辑
        const cleanedText = inputText
            .toLowerCase()
            .replace(/[^\w\s'-]/g, '') // 保留连字符和单引号
            .replace(/\n+/g, ' ');     // 换行符转为空格

        // 过滤空单词和纯符号
        const words = cleanedText
            .split(/\s+/)
            .filter(word => word.length > 0 && !/^['-]+$/.test(word));

        // 更新统计数据
        setWordStats({
            total: words.length,
            unique: new Set(words).size
        });
    }, [inputText]);

    // 清空文本
    const clearText = () => {
        setInputText('');
    };

    return (
        <Content style={{
            minHeight: '100vh',
            padding: '32px 24px',
            backgroundColor: token.colorBgLayout,
            backgroundImage: `linear-gradient(120deg, ${token.colorBgLayout}, ${token.colorBgContainer})`
        }}>
            <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                {/* 标题区域 */}
                <div style={{
                    textAlign: 'center',
                    marginBottom: '40px',
                    padding: '16px 0',
                    position: 'relative'
                }}>
                    <Title
                        level={2}
                        style={{
                            margin: 0,
                            background: `linear-gradient(90deg, ${token.colorPrimary}, ${token.colorSecondary})`,
                            WebkitBackgroundClip: 'text',
                            backgroundClip: 'text',
                            color: 'transparent',
                            fontWeight: 700,
                            fontSize: '2.2rem'
                        }}
                    >
                        English Font Studio
                    </Title>
                    <Paragraph
                        style={{
                            color: token.colorTextSecondary,
                            margin: '8px 0 0',
                            fontSize: '1rem'
                        }}
                    >
                        Real-time font preview & word counting tool
                    </Paragraph>

                    {/* 装饰线 */}
                    <div style={{
                        width: '80px',
                        height: '4px',
                        backgroundColor: token.colorPrimary,
                        borderRadius: '2px',
                        margin: '16px auto 0',
                        opacity: 0.7
                    }} />
                </div>

                {/* 主内容区 */}
                <Row gutter={[32, 32]}>
                    {/* 输入与统计卡片 */}
                    <Col xs={24} md={7} lg={6}>
                        <Card
                            title={
                                <Space size="small" style={{ alignItems: 'center' }}>
                                    <EditOutlined style={{ color: token.colorPrimary }} />
                                    <span>Input & Statistics</span>
                                </Space>
                            }
                            variant="outlined"
                            style={{
                                borderRadius: token.borderRadiusLG,
                                borderColor: token.colorBorderAlt,
                                boxShadow: '0 4px 16px rgba(0,0,0,0.04)',
                                transition: 'all 0.3s ease',
                                height: '100%'
                            }}
                            className="hover:shadow-lg hover:border-color-primary/30"
                            extra={
                                inputText.trim() && (
                                    <Text
                                        type="link"
                                        onClick={clearText}
                                        style={{ fontSize: '0.9rem', cursor: 'pointer' }}
                                    >
                                        Clear
                                    </Text>
                                )
                            }
                        >
                            {/* 文本输入框 */}
                            <TextArea
                                placeholder="Type or paste your English text here...
Example: Hello world! This is a beautiful day for testing different fonts."
                                value={inputText}
                                onChange={handleTextChange}
                                autoSize={{ minRows: 14, maxRows: 20 }}
                                style={{
                                    marginBottom: '24px',
                                    borderRadius: token.borderRadiusMD,
                                    borderColor: token.colorBorder,
                                    boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.05)',
                                    fontSize: '1rem',
                                    lineHeight: 1.6
                                }}
                                showCount
                                maxLength={2000}
                            />

                            {/* 统计区域 */}
                            <div style={{
                                backgroundColor: `linear-gradient(135deg, ${token.colorPrimaryBg}, ${token.colorSecondaryBg})`,
                                borderRadius: token.borderRadiusMD,
                                padding: '20px',
                                border: `1px solid ${token.colorBorderAlt}`
                            }}>
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    marginBottom: '16px'
                                }}>
                                    <BarChartOutlined style={{
                                        color: token.colorPrimary,
                                        marginRight: '8px'
                                    }} />
                                    <Title level={5} style={{ margin: 0, color: token.colorTextHeading }}>
                                        Word Analysis
                                    </Title>
                                </div>

                                <Space direction="vertical" size="large" style={{ width: '100%' }}>
                                    {/* 总单词数统计 */}
                                    <Statistic
                                        title={
                                            <Text style={{
                                                fontSize: '0.9rem',
                                                color: token.colorTextSecondary
                                            }}>
                                                Total Words
                                            </Text>
                                        }
                                        value={wordStats.total}
                                        valueStyle={{
                                            color: token.colorPrimary,
                                            fontSize: '1.8rem',
                                            fontWeight: 600
                                        }}
                                        prefix={<div style={{
                                            width: '8px',
                                            height: '8px',
                                            borderRadius: '50%',
                                            backgroundColor: token.colorPrimary,
                                            display: 'inline-block',
                                            marginRight: '8px'
                                        }} />}
                                    />

                                    <Divider style={{ margin: '8px 0', backgroundColor: token.colorBorderAlt }} />

                                    {/* 去重单词数统计 */}
                                    <Statistic
                                        title={
                                            <Text style={{
                                                fontSize: '0.9rem',
                                                color: token.colorTextSecondary
                                            }}>
                                                Unique Words
                                            </Text>
                                        }
                                        value={wordStats.unique}
                                        valueStyle={{
                                            color: token.colorSecondary,
                                            fontSize: '1.8rem',
                                            fontWeight: 600
                                        }}
                                        prefix={<div style={{
                                            width: '8px',
                                            height: '8px',
                                            borderRadius: '50%',
                                            backgroundColor: token.colorSecondary,
                                            display: 'inline-block',
                                            marginRight: '8px'
                                        }} />}
                                    />
                                </Space>
                            </div>
                        </Card>
                    </Col>

                    {/* 字体预览卡片 */}
                    <Col xs={24} md={17} lg={18}>
                        <Card
                            title={
                                <Space size="small" style={{ alignItems: 'center' }}>
                                    <EyeOutlined style={{ color: token.colorSecondary }} />
                                    <span>Font Preview Gallery</span>
                                </Space>
                            }
                            variant="outlined"
                            style={{
                                borderRadius: token.borderRadiusLG,
                                borderColor: token.colorBorderAlt,
                                boxShadow: '0 4px 16px rgba(0,0,0,0.04)',
                                transition: 'all 0.3s ease',
                                height: '100%'
                            }}
                            className="hover:shadow-lg hover:border-color-secondary/30"
                        >
                            {/* 字体预览标签页 */}
                            <Tabs
                                defaultActiveKey="print"
                                size="middle"
                                items={generateTabsItems(inputText, token)}
                                style={{ width: '100%' }}
                                tabBarStyle={{
                                    marginBottom: '16px',
                                    borderBottom: `1px solid ${token.colorBorderAlt}`
                                }}
                                tabBarItemStyle={{
                                    padding: '12px 20px',
                                    margin: '0 8px',
                                    borderRadius: token.borderRadiusSM,
                                    transition: 'all 0.2s ease'
                                }}
                                tabBarActiveItemStyle={{
                                    color: token.colorPrimary,
                                    fontWeight: 500,
                                    borderBottom: `2px solid ${token.colorPrimary}`
                                }}
                            />

                            {/* 使用提示 */}
                            <div style={{
                                marginTop: '24px',
                                padding: '16px',
                                backgroundColor: token.colorBgAlt,
                                borderRadius: token.borderRadiusMD,
                                border: `1px solid ${token.colorBorderAlt}`
                            }}>
                                <Paragraph
                                    style={{
                                        margin: 0,
                                        color: token.colorTextSecondary,
                                        fontSize: '0.9rem'
                                    }}
                                >
                                    <Text type="primary" style={{ fontWeight: 500 }}>Pro Tip:</Text>
                                    Different fonts evoke different emotions. Use cursive for creative writing, serif for formal documents, and sans-serif for digital content.
                                </Paragraph>
                            </div>
                        </Card>
                    </Col>
                </Row>

                {/* 页脚 */}
                <div style={{
                    textAlign: 'center',
                    marginTop: '48px',
                    color: token.colorTextSecondary,
                    fontSize: '0.9rem'
                }}>
                    <Paragraph style={{ margin: 0 }}>
                        © {new Date().getFullYear()} English Font Studio | Built with React & Ant Design
                    </Paragraph>
                </div>
            </div>
        </Content>
    );
};

export default EnglishFontStudio;
